{% extends '@WebsiteBundle/layout/layout.html.twig' %}
 {% block page %}
   {{ parent() }}
<div id="main" class="myMain">
  <div class="layui-main">
    <div class="layui-row layui-col-space20">
      <div class="layui-col-md2">
        {{ render(path('app_user_userNav', {route:route})) }}
      </div>
      <div class="layui-col-md10">
        <div class="mainBox">
          <div class="content">
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;">
                           <legend>修改手机号码-第一步</legend>
              </fieldset>
             <div class="layui-row">
                <form class="layui-form  ajaxform layui-col-md5  needs-validation" method="post" action="{{ path('app_user_checkMobileCode_do') }}" novalidate>
                  <div class="layui-form-item">
                    为保证您的账号安全，修改手机号之前需先验证
                  </div>
                  <div class="layui-form-item">
                    {{ mobileView }}
                  </div>

                  <div class="layui-form-item">
                    <div class="layui-inline">
                      <input  autocomplete="off" class="layui-input" type="text" name="imgCode" id="imgCode" placeholder="图片验证码">
                    </div>
                    <div class="layui-inline">
                      <img  src="{{ path('app_glob_recaptcha', {type:'changeMobileFirst'}) }}"  id="recaptcha_sms"  alt="点击图片更换验证码">
                    </div>
                  </div>

                  <div class="layui-form-item">
                    <div class="layui-inline">
                      <input type="text" name="code"  value="" placeholder="短信验证码" autocomplete="off" class="layui-input" />
                    </div>
                    <div class="layui-inline">
                      <a href="javascript:;" class="layui-btn layui-btn-normal layui-btn-sm" id="smssend">点击发送短信验证码</a>
                    </div>
                  </div>

                  <div class="layui-form-item">
                    <input type="hidden" name="imgType" class="imgType" id="imgType" value="changeMobileFirst">
                    <input type="hidden" name="mobile" id="smsmobile" value="{{ user['mobile'] }}">
                    <button type="submit" class="layui-btn  layui-btn-normal">下一步</button>
                  </div>

                </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}
{% block body_custom_javascript %}
  {{ parent() }}
  <script>
    $(function(){
      var is_smssend = false, smssend_interval = null;     //标记短信发送中
        $("#recaptcha_sms").captcha();

      $("#smssend").click(function(){
        if(is_smssend){     //短信发送中60s后发送
          return false;
        }
        var sms_mobile = $("#smsmobile").val();
        var changeMobileFirst = $("#imgType").val();
        var imgCode = $("#imgCode").val();
        if(!imgCode){
          showMsg(400, "图形验证码不能为空!");
          return false;
        }

        if(!sms_mobile) {
          showMsg(400, "手机号码不能为空!");
          return false;
        }

        var data = {mobile:sms_mobile,type:changeMobileFirst,imgCode:imgCode};
        dataStr = JSON.stringify(data);
        $.postJSON(
          "{{ path('app_glob_sendCaptcha') }}",
          dataStr,
          function (responseText) {
            if (typeof responseText == "string"){
              var responseText = $.parseJSON(responseText);
            }

            if(responseText.code == '200'){
              layer.closeAll();
              smssendInterval();   // 开启倒计时
            }else{
              showMsg(responseText.code, responseText.message);
              //图片模拟点击
              $("#recaptcha_sms").trigger("click");
            }
          }
        );
      });

      // 开启短信发送中状态定时器
      function smssendInterval(){
        is_smssend = true;      //开启倒计时状态
        clearInterval(smssend_interval);

        var time = 60;
        $('#smssend').text('请'+time+'s后重新获取')

        smssend_interval = setInterval(function(){
          if( time <= 1 ){
            clearInterval(smssend_interval);
            is_smssend = false;
            $('#smssend').text('点击发送验证码')
            return false;
          }
          time--;
          $('#smssend').text('请'+time+'s后重新获取')
        }, 1000);

      }

    });
  </script>
{% endblock %}
